<template>
	<view class="page">
		<view class="head" :style="{ height: '384rpx', width: selectData.screenWidth + 'px' }">
			<view class="back_box" :style="{ height: '384rpx' }">

				<!-- 状态栏 -->
				<view class="null"
					:style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
				</view>
				<!-- 返回 -->
				<view class="back"
					:style="{ top: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px', height: selectData.navBarHeightTitle + 'px' }">
					<image @click="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"
						mode="aspectFit">
					</image>
					<text class="text ft-32 fw-800 c-33">{{
						'产品佣金'
					}}</text>
					<view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 90) + 'px' }"
						style="color: aqua;height: 100px;">
					</view>
				</view>
				<view class="headerContent"
					:style="{ top: (selectData.statusBarHeight + selectData.navBarHeightTitle) + 'px', width: selectData.screenWidth + 'px' }">
					<view class="ft-32 c-33 fw-800">Hi、{{ (dataObj.sale_info?.title) || '高级移民专家' }} &nbsp;
						{{ dataObj.sale_info?.nickname_show + '老师' }}
					</view>
					<view class="ft-24 c-99 mt-10">今天 {{ dataObj?.today_time }} {{ dataObj?.today_week }}</view>
					<view class="msg_box flex">
						<view class="msg_box_item ft-22 c-66">
							<image @click="goBack" class="icon_samll mr-8"
								src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon_black.png"
								mode="aspectFit" />
							4月产品佣金高佣更新说明

						</view>
						<view class="msg_box_item ft-22 c-66" @click="goPage()">
							<image @click="goBack" class="icon_samll mr-8"
								src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon_black.png"
								mode="aspectFit" />
							佣金发放说明

						</view>
					</view>
				</view>

			</view>

		</view>
		<view style="height: 384rpx;"></view>
		<view class="content_box">
			<view class="card_box">
				<image class="banner" src="https://cdn.oss.bon-top.cn/static_bc/images/money_banner.png"
					mode="aspectFill" />
				<view class="user_box flex-c-center">
					<view class="bg bd-r50c flex-center">
						<image class="imgs bd-r50c" src="https://cdn.oss.bon-top.cn/static_bc/images/avtor.jpg"
							mode="aspectFill" />
					</view>
					<view class="ft-24 c-66 mt-10">您的专属平台客服</view>
				</view>
				<view class="card_box_text flex">
					<view class="left">
						<view class="one flex">
							<view class="name flex">
								<text class="fw-800 ft-32 c-33">{{ dataObj.sale_info?.nickname_show }}</text>
								<image class="bd-r50c nameImg"
									src="https://cdn.oss.bon-top.cn/static_bc/images/nv_icon.png" mode="aspectFill" />
							</view>
							<view class="tag ft-20 c-33">{{ dataObj.sale_info?.title || '高级移民专家' }}</view>
						</view>
						<view class="tow flex-bwt mt-20">
							<view class="phone flex">
								<image class="icon_samll bd-r50c"
									src="https://cdn.oss.bon-top.cn/static_bc/images/phone_icon.png"
									mode="aspectFill" />
								<text class="ft-24 c-33 ml-4">0755-8938 5111</text>

							</view>
							<view class="ft-22 c-33">点击打开扫码添加~</view>
						</view>
					</view>
					<view class="rig flex-center">
						<image class="img" src="https://cdn.oss.bon-top.cn/static_bc/images/QR_code.png"
							mode="aspectFill" @click="showOverlay = !showOverlay" />
					</view>

				</view>
			</view>
			<view class="list_box mt-50">
				<!--tab栏  -->
				<view class="tabBar flex" style="">
					<view class="item ft-28 c-66 flex-center mr-20" :class="{ active: selectId === item.id }"
						v-for="(item, index) in tableList" :key="index" @click.stop="selectBtn(index, item)">{{
							item.name }}
					</view>
				</view>
				<comLoadMord v-if="Object.keys(dataObj).length > 0" :dataList='dataObj' :pageInfo='pageInfo'
					@getDatas="getProductBroList">

					<view class="list">
						<view class="list_card mt-20 pd-20" v-for="item in dataList" :key="item.id">
							<view class="ft-28 c-33 fw-800">{{ item.created_at }}</view>
							<view class="list_item mt-20 pd-20">
								<view class="title ft-24 c-33 fw-800">{{ item.file_info?.origin_name }}
								</view>
								<view class="text_box flex-bwt">
									<view>
										<view class="size ft-22 c-99 mt-10">文件大小：{{ item.file_info?.size_info }}</view>
										<view class="size ft-22 c-99 mt-10">更新时间：{{ item.updated_at }}</view>
									</view>
									<view class="openbtn" @click="openImage(item.file_info)">点击打开</view>
								</view>

							</view>
						</view>
					</view>

				</comLoadMord>
			</view>
		</view>
	</view>
	<up-overlay :show="showOverlay" :opacity="0.3">
		<view class="warp ">
			<view class="rect" @tap.stop>

				<view class="list pd-20">
					<view class="mt-10 text_center ft-32 c-33 fw-800">专属客服企业微信</view>
					<view class="QR_image mt-20">
						<image class="wh-100" data-src="https://cdn.oss.bon-top.cn/static_bc/images/QR_codeImage.png"
							src="https://cdn.oss.bon-top.cn/static_bc/images/QR_codeImage.png" mode="aspectFill"
							@longpress.stop="longpress" />
					</view>
					<view class="btn ft1 c-dbf flex-center auto mt-30" @click="getQuan">
						<image class="img" src="https://cdn.oss.bon-top.cn/static_bc/images/zw_icon.png"
							mode="aspectFill" show-menu-by-longpress="true" />
						<view>
							长按扫码添加 <br>
							或点击保存~
						</view>
					</view>
				</view>
				<view class="bottom"
					@tap="saveNetworkImage('https://cdn.oss.bon-top.cn/static_bc/images/QR_codeImage.png')">保存二维码</view>
			</view>
			<view class="close ml-20" @click="showOverlay = false">
				<image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/closeT.png"></image>
			</view>
		</view>

	</up-overlay>
</template>

<script setup lang="js">
import comLoadMord from '@/components/comLoadMord.vue'

import { onLoad, onReady } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
const selectData = ref({})
const tableList = ref([{
	id: 1,
	name: '移民产品',
	key: '移民'
},
{
	id: 2,
	name: '教育产品',
	key: '教育'
}
])
let pageInfo = reactive({
	page: 1,
	pageSize: 10
})
const showOverlay = ref(false)
const goPage = () => {
	let data = {
		img: 'https://cdn.oss.bon-top.cn/static_bc/images/shareBan.png',
		html: '规则'
	}
	uni.navigateTo({ url: '/subpackage/rule/ruleList?data=' + JSON.stringify(data) })
}
const openImage = (item) => {
	wx.previewImage({
		urls: [item.url] // 需为网络图片路径
	})
}
const saveNetworkImage = async (url) => {
	try {
		// 1. 检查权限
		const { authSetting } = await wx.getSetting();
		if (!authSetting['scope.writePhotosAlbum']) {
			const res = await wx.authorize({
				scope: 'scope.writePhotosAlbum'
			});
		}


		// 2. 下载远程文件
		await wx.downloadFile({
			url: url,// 需配置合法域名
			success(res) {
				// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
				if (res.statusCode === 200) {
					//  res.tempFilePath 下载后的图片地址
					// 3. 保存到相册
					wx.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success(res) {
							console.log('saveImageToPhotosAlbum', res)

						},
						fail(errno) {
							console.log('saveImageToPhotosAlbum errno', errno)
						}
					});
					wx.showToast({ title: '保存成功', icon: 'none' });

				}
			}
		});

	} catch (error) {
		console.error('保存失败:', error);
		if (error.errno === 104) showAuthGuide();
	}
}

// 权限引导方法
const showAuthGuide = () => {
	wx.showModal({
		title: '权限申请',
		content: '需要相册权限继续操作',
		success: (res) => {
			if (res.confirm) {
				wx.openSetting();
			}
		}
	});
}
const selectId = ref(1)
const selectName = ref('')
const longpress = (e) => {
	var src = e.currentTarget.dataset.src;
	wx.previewImage({
		urls: [src] // 需为网络图片路径
	})

}
const selectBtn = async (idx, item) => {
	selectId.value = item.id
	selectName.value = item.key
	dataList.value = []
	getProductBroList()

}
const dataList = ref([])
const dataObj = ref({})
const getProductBroList = async () => {
	await utils.request(api.getProductBroList, { cate_name: selectName.value }, 'get').then(res => {
		dataObj.value = res.data
		dataObj.value.listIsShow = dataObj.value.items.length > 0
		dataList.value = [...dataList.value, ...res.data.items]

	})
}
onLoad(() => {
	getProductBroList()
})

// 返回键
const goBack = () => {
	let pages = getCurrentPages();
	if (pages.length > 1) {
		uni.navigateBack(-1)
	} else {
		wx.reLaunch({
			url: '/pages/index/index',
		})
	}
}
onReady(async () => {
	const dpr = uni.getSystemInfoSync().pixelRatio

	const systemInfo = uni.getSystemInfoSync()
	let statusBarHeight = systemInfo.statusBarHeight
	let screenWidth = systemInfo.screenWidth
	let menuButtonInfo = 0
	// #ifdef MP
	menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// #endif
	let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
	let navBarHeight = Number(navHeight + statusBarHeight);//导航总高
	selectData.value = {
		headHeight: navHeight,
		screenWidth: screenWidth,
		statusBarHeight: statusBarHeight,
		navBarHeight: navBarHeight,//导航总高
		navBarContentTop: navHeight + statusBarHeight,//导航文插槽距离顶部距离
		navBarHeightTitle: navHeight,//导航文字模块总高
		capsuleSpace: systemInfo.screenWidth - menuButtonInfo.right + 6,
		menuButtonWidth: menuButtonInfo.width,
		menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,
	}
})
</script>

<style lang="scss" scoped>
.head {
	height: 290rpx;
	// background: linear-gradient(180deg, #FFF3EC 0%, rgba(251, 255, 223, 0) 100%);
	background: linear-gradient(to bottom, #FFF3EC, #fff);
	// background-color: red;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;

	.back_box {
		position: relative;

		.bg {
			height: 290rpx;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(180deg, #FFF3EC 0%, rgba(251, 255, 223, 0) 100%);

		}

		.back {
			// position: absolute;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			overflow: hidden;

			.text {
				width: 366rpx;
				text-align: center;

			}
		}

		.headerContent {
			// background-color: red;
			// position: absolute;
			border-top: 2rpx solid #f1f1f1;
			padding: 30rpx 26rpx;

			.msg_box {
				margin-top: 20rpx;

				.msg_box_item {
					height: 52rpx;
					line-height: 52rpx;
					padding: 0 20rpx;
					border-radius: 20rpx;
					background-color: #F8F8F8;
					margin-right: 20rpx;
					justify-content: flex-start;
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.icon {
		width: 28rpx;
		height: 48rpx;
		margin-left: 30rpx;
		margin-right: auto;
	}
}

.content_box {
	background-color: #fff;
	padding: 30rpx;
	box-sizing: border-box;

	.card_box {
		width: 100%;
		height: 446rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #F1F1F1;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;

		.banner {
			width: 100%;
			height: 136rpx;
			// position: absolute;
			// top: 20rpx;
			// z-index: 0;
		}

		.user_box {
			width: calc(100% - 40rpx);
			position: absolute;
			z-index: 1;
			top: 80rpx;
			// margin: 0 auto;
			// background-color: red

			.bg {
				width: 128rpx;
				height: 128rpx;
				background: #FFFFFF;
				border: 2rpx solid #DBF046;

				.imgs {
					width: 112rpx;
					height: 112rpx;
				}
			}
		}

		&_text {
			width: calc(100% - 40rpx);
			height: 124rpx;
			// background-color: #DBF046;
			border-top: 2rpx solid #f1f1f1;
			position: absolute;
			// top:100rpx;
			bottom: 20rpx;
			align-items: center;
			padding-top: 20rpx;

			.left {
				flex: 1;
				margin-right: 10rpx;

				.tag {
					padding: 4rpx 10rpx;
					border-radius: 8rpx;
					margin-left: 20rpx;
					background-color: #DBF046;
				}

				.name {
					height: 50rpx;

					.nameImg {
						width: 28rpx;
						height: 28rpx;
						margin-top: -10rpx;
						margin-left: 4rpx;
					}


				}

				.tow {
					.phone {
						width: 230rpx;
						height: 58rpx;
						background: linear-gradient(90deg, #F2F2FF 0%, #FFFFFF 100%);
						border-radius: 20rpx;
						padding-left: 20rpx;
					}
				}
			}

			.rig {
				width: 122rpx;
				height: 122rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid #333333;

				.img {
					width: 106rpx;
					height: 106rpx;
				}
			}
		}
	}

	.tabBar {
		.item {
			padding: 0 20rpx;
			height: 72rpx;
			background: #f8f8f8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			flex-shrink: 0;
		}

		.item:last-child {
			margin-right: 0;
		}

		.active {
			background: #dbf046;
			color: #333333;
		}
	}

	.list_box {
		.list {
			.list_card {
				width: 100%;
				background: #F8F8F8;
				border-radius: 40rpx;

				.list_item {
					width: 650rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.title {}

					.text_box {
						align-items: flex-end;
					}

					.openbtn {
						background-color: #333333;
						color: #DBF046;
						text-align: center;
						height: 54rpx;
						line-height: 54rpx;
						font-size: 24rpx;
						border-radius: 20rpx;
						padding: 0 20rpx;

					}
				}
			}
		}
	}
}

.warp {
	display: flex;
	align-items: flex-start;
	// justify-content: center;
	height: 100%;
	margin-top: 300rpx;

	.rect {
		width: 518rpx;
		height: 860rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-left: calc(50% - (518rpx / 2));

		.list {
			.QR_image {
				width: 398rpx;
				height: 634rpx;
				margin: 20rpx auto 0;
			}

			.btn {

				.img {
					width: 56rpx;
					height: 58rpx;
					margin-right: 10rpx;

				}

				color: #1F18EE;
				font-size: 22rpx;
				font-weight: 400;
			}
		}

		.bottom {
			width: 258rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 60rpx auto 0;
			font-size: 28rpx;

		}
	}

	.close {
		width: 44rpx;
		height: 44rpx;
	}
}
</style>
